<!--工序异常-->
<template>
  <card-wrapper :data-item="dataItem" class="w-288">
    <area-top :text-left="dataItem['工单'] || '无'" :text-center="$i18n.t('mind.workOrder')" />
    <area-top :text-left="dataItem['批次'] || '无'" :text-center="$i18n.t('mind.batchNo')" class="mt-8" sub />
    <label-icon :label="dataItem['工艺'] || '无'" type="craft" class="mt-12" />
    <label-icon :label="dataItem['工序'] || '无'" type="process" class="mt-4" />
    <label-normal label="不良类别/现象/部位" :value="dataItem['不良类别/现象/部位'] || '无'" class="mt-8" />
    <div class="my-16 cross-line" />
    <label-normal :label="$i18n.t('mind.reviewResult')" class="mt-8">
      <span :class="colorParams[dataItem['复核结果-颜色']]">{{ dataItem['复核结果'] || '无' }}</span>
    </label-normal>
    <label-normal :label="$i18n.t('mind.reviewer')" :value="`${dataItem['复核人'] || '无'} ${dataItem['复核时间'] || '无'}`" class="mt-8" />
    <label-normal :label="$i18n.t('mind.advice')" class="mt-8">
      <span :class="colorParams[dataItem['评审建议-颜色']]">{{ dataItem['评审建议'] || '无' }}</span>
    </label-normal>
    <label-normal :label="$i18n.t('mind.reviewByName')" :value="`${dataItem['评审人'] || '无'} ${dataItem['评审时间'] || '无'}`" class="mt-8" />
    <label-normal :label="$i18n.t('mind.rebateRepairResults')" class="mt-8">
      <span :class="colorParams[dataItem['返工返修结果-颜色']]">{{ dataItem['返工返修结果'] || '无' }}</span>
    </label-normal>
    <label-normal :label="$i18n.t('mind.repairUserName')" :value="`${dataItem['返修人'] || '无'} ${dataItem['返修时间'] || '无'}`" class="mt-8" />
  </card-wrapper>
</template>

<script>
import CardWrapper from '@/views/mind/components/common/card-wrapper.vue'
import AreaTop from '@/views/mind/components/common/area-top.vue'
import LabelIcon from '@/views/mind/components/common/label-icon.vue'
import LabelNormal from '@/views/mind/components/common/label-normal.vue'
export default {
  name: 'card-process-abnormal',
  props: {
    dataItem: {
      type: Object,
      default: () => {}
    }
  },
  components: { CardWrapper, AreaTop, LabelIcon, LabelNormal },
  computed: {
    colorParams() {
      return {
        黄色: 'text-E7A11A',
        绿色: 'text-19AA8D',
        红色: 'text-FF4656'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.cross-line {
  border-top: 1px dashed #9badbc;
}
</style>
